<template>
    <div>
        <div class="main-height">
            <Table :columns="columns" :data="data">
                <template slot-scope="{ row }" slot="operation">
                    <strong>
                        <a @click="getShowDetail(row)">详细</a>
                    </strong>
                </template>
            </Table>
        </div>
        <Modal v-model="modal" draggable title="消费详细" width="900px" footer-hide>
            <Table :columns="columns1" :data="data1"></Table>
            <div class="order-inr">
                订单金额:
                <strong>¥ {{ totalInfo.money }}</strong>
                优惠金额:
                <strong>¥ {{ totalInfo.refund_money }}</strong>
                实收金额:
                <strong>¥ {{ totalInfo.reality_money }}</strong>
            </div>
        </Modal>
    </div>
</template>
<script>
    import { PatientConsumptionList, PatientConsumptionInfo } from '@api/patient'

    export default {
        data () {
            return {
                modal: false,
                columns: [
                    {
                        title: '收费/退费时间',
                        key: 'clinic_time_str'
                    },
                    {
                        title: '诊室',
                        key: 'consulting_room'
                    },
                    {
                        title: '医生',
                        key: 'doctor_name'
                    },
                    {
                        title: '就诊时间',
                        key: 'clinic_time_str'
                    },
                    {
                        title: '应收/退金额 ',
                        key: 'money'
                    },
                    {
                        title: '实收/退金额',
                        key: 'reality_money'
                    },
                    {
                        title: '操作 ',
                        slot: 'operation'
                    }
                ],
                data: [],
                columns1: [
                    {
                        title: '名称',
                        key: 'drug_name'
                    },
                    {
                        title: '数量',
                        key: 'drug_num',
                        width: 80
                    },
                    {
                        title: '单位',
                        key: 'drug_unit',
                        width: 80
                    },
                    {
                        title: '类型',
                        key: 'drug_type',
                        width: 118
                    },
                    {
                        title: '单价 ',
                        key: 'price'
                    },
                    {
                        title: '金额 ',
                        key: 'money'
                    },
                    {
                        title: '折后金额',
                        key: 'reality_money'
                    }
                ],
                data1: [],
                totalInfo: {}
            }
        },
        methods: {
            getData (id) {
                const params = {
                    patient_card_id: id,
                    page: 0,
                    pageSie: 0
                }
                PatientConsumptionList(params).then((res) => {
                    this.data = res.list
                }).catch(() => {})
            },
            getShowDetail (row) {
                const params = {
                    consumption_id: row.id
                }
                PatientConsumptionInfo(params).then((res) => {
                    this.data1 = res.detail_list
                    this.totalInfo = {
                        money: res.money,
                        reality_money: res.reality_money,
                        refund_money: res.refund_money
                    }
                    this.modal = true
                }).catch(() => {})
            }
        }
    }
</script>
<style scoped>
.order-inr {
    padding: 20px;
}
.order-inr strong {
    font-size: 16px;
    font-weight: bold;
    margin-right: 30px;
}
.main-height {
    height: 460px;
    max-height: 460px;
    overflow-y: auto;
}
</style>
